<template>
  <div class="app-container">
    <div>
      <!-- 条件栏 -->
      <PageFilter v-model:query="filterInfo.query" :filter-list="filterInfo.list">
      </PageFilter>
      <!-- 表格 -->
      <TableContainer
        :refresh="tableInfo.refresh"
        :init-curpage="tableInfo.initCurpage"
        v-model:data="tableInfo.data"
        :tab-index="true"
        :check-box="false"
        v-model:query="filterInfo.query"
        :field-list="tableInfo.fieldList"
        :api="tableInfo.api"
        :handle="tableInfo.handle"
      >
      </TableContainer>
    </div>
    <PageDialog
      v-show="dialogInfo.visible"
      :title="dialogInfo.title"
      v-model:visible="dialogInfo.visible"
      :width="dialogInfo.width"
      :bt-loading="dialogInfo.btLoading"
      :bt-list="dialogInfo.btList"
    >
      <PageForm
        class="paddingBox order-model-formBox flex_wrap_start_start"
        v-model:ref-obj="formInfo.ref"
        :disabled="formInfo.disabled"
        :data="formInfo.data"
        :field-list="formInfo.fieldList"
        :rules="formInfo.rules"
        :label-width="formInfo.labelWidth"
      ></PageForm>
    </PageDialog>
  </div>
</template>

<script setup name="hisDeptContrast">
import { getSynDeptPage, getSynDeptRefresh, putSynDept } from '@/api/hrp.js'
const { proxy } = getCurrentInstance()
const time = ref([])
const filterInfo = ref({
  query: {},
  list: [{ type: 'button', label: '刷新', event: search }],
})
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  data: [],
  api: null,
  fieldList: [
    { label: 'HIS部门名称', value: 'hisDeptName' },
    { label: 'HIS部门编码', value: 'hisDeptCode' },
    { label: 'HRP部门名称', value: 'hrpDeptName' },
    { label: 'HRP部门编码', value: 'hrpDeptCode' },
  ],
  handle: {
    fixed: 'right',
    label: '操作',
    width: '100',
    btList: [
      {
        label: '修改',
        event: update,
        show: proxy.$permission('hisDeptContrast:update'),
      },
    ],
  },
})
const formInfo = ref({
  data: {},
  fieldList: [
    {
      label: 'HIS部门名称',
      value: 'hisDeptName',
      type: 'input',
    },
    {
      label: 'HIS部门编码',
      value: 'hisDeptCode',
      type: 'input',
    },
    {
      label: 'HRP部门名称',
      value: 'hrpDeptName',
      type: 'input',
    },
    {
      label: 'HRP部门编码',
      value: 'hrpDeptCode',
      type: 'input',
    },
  ],
  rules: {},
  labelWidth: '120px',
})
const dialogInfo = ref({
  visible: false,
  title: '修改',
  btLoading: false,
  type: '',
  msg: '',
  width: '400px',
  flag: true,
  btList: [
    { label: '关闭', event: handleClose, show: true },
    {
      label: '保存',
      type: 'primary',
      event: save,
      show: true,
    },
  ],
})
function getList() {
  tableInfo.value.api = getSynDeptPage
  tableInfo.value.refresh = Math.random()
}
function search() {
  getSynDeptRefresh().then((res) => {
    if (res && res.success) {
      tableInfo.value.initCurpage = Math.random()
      tableInfo.value.refresh = Math.random()
    }
  })
}
function update(row) {
  dialogInfo.value.visible = true
  formInfo.value.data = proxy.$fn.deepClone(row)
}
function handleClose() {
  dialogInfo.value.visible = false
  formInfo.value.data = {}
}
function save() {
  let data = formInfo.value.data
  putSynDept(data).then((res) => {
    if (res && res.success) {
      tableInfo.value.initCurpage = Math.random()
      tableInfo.value.refresh = Math.random()
    }
  })
}
onMounted(() => {
  getList()
})
</script>

<style scoped></style>
